{% extends "base.html" %}

{% block header%}
<title>{{statistic.name}} 统计结果</title>
<script type="text/javascript" src="/static/js/highcharts.js" ></script>
{% endblock %}

{% block content %}
<div id="bar">
<a href="/statistic/list/{{statistic.log_type}}">统计列表</a> -> <b>{{statistic.name}}</b> [统计结果 <a href="/result/chart/{{statistic_id}}">统计图表</a>]
<div class="buttons">
 <a href="/statistic/list/{{statistic.log_type}}">返回</a>
 </div>
</div>

<!-- 对管理员公开部分 -->
{% if usm.current_userRole_is_root %}
<div class="sub-menu">
{%for item in list_statistic%}
<a href="/result/list/{{item.id}}"{%ifequal item.id statistic_id%} class="active"{%endifequal%}>{{item.name}}</a>
{%endfor%}
</div>
{% endif %}
<!-- 对管理员公开部分  END -->

<div class="sub-menu-1">
<form method="post">
	<input type="hidden" name="id" value="{{statistic_id}}" />
<table>
<tr {%ifequal canSelectServer 0%}style="display:none"{%endifequal%}><th width="90"><label><input id="select_server" type="checkbox" onchange="selectAll(this.id)"  checked="checked"/>服务器全选</label></th><td>
<div id="select_server_area">
	{%for serverItem in list_server%}
	<label><input type="checkbox" name="s" value="{{serverItem.id}}" {%ifequal serverItem.is_show 1%}checked='checked'{%endifequal%} />{{serverItem.name}}</label>
	{%endfor%}
</div>
</td></tr>

<tr>
	<th width="80"> 
		
		<label><input id="select_channel" type="checkbox" onchange="selectAll(this.id)" checked="checked" />渠道全选</label>
		<input type="text" class="txt_channel" onkeyup="change_channel_chk()" style="width:30px;" />
		
	</th>
<td>
<a href="javascript:expendAll()" id="div_expendAll" style="float:right">展开全部>>></a>
<div id="select_channel_area" style="height:1.5em;overflow:hidden;">
	{%for channelItem in list_channel%}
			<label><input type="checkbox" name="c" value="{{channelItem.id}}" data_name="{{channelItem.name}}" {%ifequal channelItem.is_show 1%}checked='checked'{%endifequal%} />{{channelItem.name}}</label>
	{%endfor%}
</div>

</td>
</tr>

<tr><th></th><td>
开始日期:<input type="text" name="sdate" class="Wdate1" value="{{sdate}}" />

结束日期:<input type="text" name="edate" class="Wdate1" value="{{edate}}" />

<input type="submit" value="查询" />
</td></tr>
</table>

</form>
</div>

<!-- <div class="sub-menu-1">
{%for item in statistic_types%}
<a href="/result/list/{{statistic_id}}/{{item.id}}"{%ifequal item.id statistic_type%} class="active"{%endifequal%}>{{item.name}}</a>
{%endfor%}
</div> -->
{% if list_record %}
<script type="text/javascript">
$(document).ready(function() {
	var options = {
		chart : {
			backgroundColor:'#FFFFFF',
			borderWidth:0,
			borderRadius:5,
			renderTo:'container',
			defaultSeriesType:'spline',
			shadow:0,
			reflow:1,
			zoomType:'x',
			events:''
		} ,
		title : {
			text:'',
			align:'center',
			verticalAlign:'',
			margin:50,
			floating:0,
			style:{
				color: '#3E576F',
				fontSize: '16px'
			}
		} ,
		subtitle : {
			text:'',
			align:'center'
		} ,
		xAxis : { 
			type : 'datetime',
			labels:{
				formatter:function(){
					return Highcharts.dateFormat('%m-%d',this.value);
				}
			},
			tickInterval : 86400000
		},
		yAxis : {
			min:0,
			title:{
				text:''
			},
			allowDecimals:0
		} ,
		series : [] ,
		legend : {
			layout:'horizontal',
			align:'center',
			backgroundColor:null,
			borderColor:'#909090',
			borderRadius:5,
			enabled:1,
			floating:0,
			shadow:0,
			style:'',borderWidth:1
		} ,
		credits : {
			enabled:0
		} ,
		tooltip : { 
			formatter :  function() {
				var s = '<b>'+ Highcharts.dateFormat('%Y-%m-%d',this.x) +'</b>';
				$.each(this.points, function(i, point) {
					s += '<br/>'+ '<b style="color:'+point.series.color+';">'+point.series.name +'</b>'+': '+point.y +'';
				});
				return s;
			} , 
			crosshairs : '1', 
			shared : '1'
		},
		plotOptions : { 						
			spline: {
				lineWidth: 2,
				states: {
					hover: {
						lineWidth: 4
					}
				},
				dataLabels : {
					enabled : 1,
					align:"right"
				},
				marker: {
					enabled: false,
					states: {
						hover: {
							enabled: true,
							symbol: 'circle',
							radius: 5,
							lineWidth: 3
						}
					}
				}
			}					 
		}
	};
	Highcharts.setOptions({ 
		global: {
			useUTC: 0 
		} 
	});   	    	
	$.each({% autoescape off %}{{list_record_arr}}{% endautoescape %}, function(key, value) {
		var series = {};
		series.name = key;
		series.data = value;
		options.series.push(series); 
	});
	new Highcharts.Chart(options);
});
</script>
<div id="container" style="width:98%;" >

</div>
<table class="list">
<tr>
<th width="200">日期</th>
<th>统计结果</th>
</tr>
{%ifequal statistic_type 0%}
	{%for item in list_record%}
	<tr>
	<td>{{item.result_time|date:"Y-m-d H:i:s"}}</td>
	<td>
	{{item.result|floatformat:'0'}}
	</td>
	</tr>
	{%endfor%}
{%else%}
	{%for items in list_record%}
	<tr>
		{%for item in items%}
			<td>{{item}}</td>
		{%endfor%}
	</tr>
	{%endfor%}
{%endifequal%}
</table>
{% else %}
<div class="sub-menu-1">
	无数据！
</div>
{% endif %}
<script type="text/javascript">
	var txt_channel = null; 
	var chk_channel_list = null;
	var chk_channel_list_len = 0;
	$(document).ready(function(){ 
		txt_channel = $(".txt_channel"); 
		chk_channel_list = $("input[name='c']");
		chk_channel_list_len = chk_channel_list.length;
		});
	function change_channel_chk(){ 
		if(!txt_channel || !chk_channel_list) 
			return;
			
		var name = txt_channel.val();
		if ('' == name)
			return;
		var source_value =  chk_channel_list_len;
		while(chk_channel_list_len -- ){
			var item = $(chk_channel_list[chk_channel_list_len]);
			if (-1 != item.attr('data_name').indexOf(name)){
				item.attr('checked', true);
			}else{
				item.attr('checked', false);
			}
		}
		chk_channel_list_len = source_value;
		
		
	}
</script>
<script type="text/javascript">
function getTimeFormat()
{
	var str = "";
	if(timeSize>=86400)
		str = "%m月%d日";
	else if(timeSize>=3600)
		str = "%H点";
	else if(timeSize>=60)
		str = "%H:%M";
	else
		str = "%H:%M:%S";

	return str;
}
function getTime(timeInt)
{
	var str = "";

	var d = new Date(parseInt(timeInt));

	if(timeSize>=86400)
		str = (d.getMonth()+1) + "月"+d.getDate()+"日";
	else if(timeSize>=3600)
		str = d.getHours() + "点";
	else if(timeSize>=60)
		str = d.getHours() + ":" + d.getMinutes();
	else
		str = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

	return str;
}

Date.prototype.format = function(fmt) {  
    var o = {  
        "M+": this.getMonth() + 1,  
        //月份  
        "d+": this.getDate(),  
        //日  
        "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,  
        //小时  
        "H+": this.getHours(),  
        //小时  
        "m+": this.getMinutes(),  
        //分  
        "s+": this.getSeconds(),  
        //秒  
        "q+": Math.floor((this.getMonth() + 3) / 3),  
        //季度  
        "S": this.getMilliseconds() //毫秒  
    };  
    var week = {  
        "0": "\u65e5",  
        "1": "\u4e00",  
        "2": "\u4e8c",  
        "3": "\u4e09",  
        "4": "\u56db",  
        "5": "\u4e94",  
        "6": "\u516d"  
    };  
    if (/(y+)/.test(fmt)) {  
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
    }  
    if (/(E+)/.test(fmt)) {  
        fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f": "\u5468") : "") + week[this.getDay() + ""]);  
    }  
    for (var k in o) {  
        if (new RegExp("(" + k + ")").test(fmt)) {  
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
        }  
    }  
    return fmt;  
}  


function expendAll()
{
	if($("#select_channel_area").css('overflow')=='hidden')
	{
		$("#div_expendAll").html("折叠全部<<<");
		$("#select_channel_area").css({'overflow':'visible','height':'auto'});	
	}
	else
	{
		$("#div_expendAll").html("展开全部>>>");
		$("#select_channel_area").css({'overflow':'hidden','height':'1.5em'});
	}
}

</script>
{% include "page_post.html" %}
{% endblock %}